<!doctype html>
<html>
<!--
http://socket.io/get-started/chat/
-->
<head>
    <title>Socket.IO chat</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        html,body{
            width: 100%;
            height:100%;
        }
        body { font: 13px Helvetica, Arial; }
        .wrap{
            overflow:hidden;
        }
        form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
        form input { border: 0; padding: 10px; width: 80%; margin-right: .5%; }
        form button { width: 18%; background: rgb(130, 224, 255); border: none; padding: 10px; }
        #messages { list-style-type: none; margin: 0; padding: 0; }
        #messages li { padding: 5px 10px; }
        #messages li:nth-child(odd) { background: #eee; }
    </style>
<!--    <script src="/javascripts/socketio-1.4.8.js"></script>
    <script src="/javascripts/jquery-1.10.2.js"></script>
    <script src="https://staticfile.qnssl.com/crypto-js/3.1.2/rollups/aes.js"></script>-->
    <script src="https://cdn.bootcss.com/socket.io/1.4.8/socket.io.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/crypto-js/3.1.2/rollups/aes.js"></script>
</head>
<body>
<div class="wrap">
    <ul id="messages"></ul>   
</div>

<form action="">
    <input id="m" autocomplete="off" /><button type="submit">Send</button>
</form>
<script>
    var socket = io();//var socket = io('http://111.206.45.12:30182/');
    $('form').submit(function(e){
        e.preventDefault();
        if(!$('#m').val()) return;
        
        socket.emit('chatname', salt?encrypt($('#m').val()):$('#m').val()); //the event name is 'chatname'
        $('#m').val('');
        return false;
    });
    
    //cache dom
    $wrap = $('.wrap');
    
    socket.on('chatname', function(msg){ //if the browser received a 'chatname'
        $('#messages').append($('<li>').text(salt?decrypt(msg,salt):msg)); //append to DOM
        if($('ul').height()>= $wrap.height()){
            $('ul li:first').remove();
        }
        /*var $lastli = $('ul li:last');
        $wrap.animate({scrollTop:$lastli.offset().top},500);*/
    });

    socket.on('salt', function(msg){ //if the browser received a salt
        salt = msg;
        console.log('salt is')
        console.log(msg)
    });
    
    //test encrypt
    var salt = '';
    function encrypt(msg) {
        var ciphertext = CryptoJS.AES.encrypt(msg,salt).toString();
        return ciphertext;
    }
    function decrypt(ciphertext,salt) {
        var bytes  = CryptoJS.AES.decrypt(ciphertext, salt);
        var decryptedData = bytes.toString(CryptoJS.enc.Utf8);
        return decryptedData;
    }
    $('.wrap').height($('body').height()-$('form').outerHeight());
    
    
    
</script>
</body>
</html>